<template>
<!-- 这个是之前。图片选择时只给图片地址。单独给。不一起给。其实都差不多 -->
  <div class="text-left">
    <div class="upload">
      <input type="file" ref="file" name="image" @change="onChange" />
    </div>

    <div class="wapper">
      <div class="item" v-for="item in imageList" :key="item.id">
        <img :src="item.src" alt="" />
        <div style="text-align:center">
          <button
            v-if="isShowCheckBtn"
            @click="checkSrc(item.src)"
            class="h-btn h-btn-s  h-btn-green"
          >
            <span>选择</span>
          </button>
          <button @click="del(item.id)" class="h-btn h-btn-s h-btn-red">
            <span>删除</span>
          </button>
        </div>
      </div>
    </div>
    <Pagination
      style=" margin-top:20px"
      v-model="pagination"
      align="center"
      @change="currentChange"
      small
    ></Pagination>
  </div>
</template>

<script>
export default {
  props: {
    isShowCheckBtn: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      pagination: {
        page: 1,
        size: 10,
        total: 100
      },
      defalutSize: 1,
      defalutType: ["image/jpeg", "image/jpg", "image/png", "image/gif"],
      imageList: []
    };
  },
  methods: {
    async onChange(e) {
      let file = e.target.files[0];
      if (file) {
        const size = file.size / 1024 / 1024;
        const type = file.type;
        if (!this.beforUpload(size, type)) {
          this.$Message.error("上传的文件不满足要求");
          file = null;
          return;
        }
        let formData = new FormData();
        formData.append("img", file); // 通过append向
        let res = await this.$post("/api/upload", formData);
        if (res && res.code === 200) {
          this.$Message.success("上传成功");
          this.$refs.file.value = "";
          this.getImageList();
        } else {
          this.$refs.file.value = "";
          this.$Message.error("上传失败");
        }
      } else {
        this.$refs.file.value = "";
        console.log("未选择文件11");
      }
      //   reset();
    },
    beforUpload(size, type) {
      return this.defalutSize > size && this.defalutType.includes(type);
    },
    async getImageList() {
      const res = await this.$post("/api/image");
      if (res && res.code === 200) {
        this.imageList = res.data.list;
        this.pagination.total = res.data.count;
      } else {
        this.$Message.error("获取失败");
      }
    },
    checkSrc(src) {
      console.log(src);
    },
    del(id) {
      console.log(id);
    },
    currentChange(v) {
      console.log(v);
    },
  },
  mounted() {
    this.getImageList();
  }
};
</script>

<style scoped lang="less">
.upload {
  margin-bottom: 20px;
}
.wapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .item {
    margin-top: 20px;
    margin-left: 10px;
    width: 15%;
    height: 190px;
    margin-right: 10px;
    margin-bottom: 10px;
    img {
      width: 100%;
      height: 170px;
    }
  }
}
</style>
